<template>
  <div class="personal">
    <div class="title">
      <div class="title-head">
        <van-icon name="setting-o" />
        <span @click="$router.push({path:'/personal/account'})">设置</span>
        <van-icon name="comment-o" />
      </div>
      <div class="title-user">
        <div class="icon-user">
          <img src="@/assets/img/icon_man.png" alt />
        </div>
        <div class="title-user-msg">
          <p class="title-user-msg_phone">{{userName}}</p>
          <p class="title-user-msg_notice">风渐吹，晚上风景留人醉。</p>
        </div>
        <div class="title-user_sign" @click="plus">
          <i class="icon-sign"></i>
          <span>签到得积分</span>
        </div>
      </div>
      <div class="title-bot">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <h4>1</h4>
            <span>浏览历史</span>
          </van-grid-item>
          <van-grid-item>
            <h4>0</h4>
            <span>收藏</span>
          </van-grid-item>
          <van-grid-item>
            <h4>0</h4>
            <span>积分</span>
          </van-grid-item>
          <van-grid-item>
            <h4>0</h4>
            <span>优惠券</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="main">
      <div class="order">
        <div class="order-title">
          <h2>我的订单</h2>
          <p>全部订单</p>
        </div>
        <div class="order-main">
          <van-grid :border="false" :column-num="5">
            <van-grid-item>
              <img src="@/assets/img/order_icon_dfk.png" alt />
              <p>待付款</p>
            </van-grid-item>
            <van-grid-item>
              <img src="@/assets/img/order_icon_dfh.png" alt />
              <p>待发货</p>
            </van-grid-item>
            <van-grid-item>
              <img src="@/assets/img/order_icon_dsh.png" alt />
              <p>待收货</p>
            </van-grid-item>
            <van-grid-item>
              <img src="@/assets/img/order_icon_dpj.png" alt />
              <p>待评价</p>
            </van-grid-item>
            <van-grid-item>
              <img src="@/assets/img/order_icon_thk.png" alt />
              <p>退货\款</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="grid">
        <van-grid :border="false" :column-num="4">
          <van-grid-item to="/address">
            <img src="@/assets/img/user_icon_shdz.png" alt />
            <p>收货地址</p>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_wdpj.png" alt />
            <p>我的评价</p>
          </van-grid-item>
          <van-grid-item >
            <a href="tel:17356589397">
              <img src="@/assets/img/user_icon_wdts.png" alt />
              <p>我的投诉</p>
            </a>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_zhxx.png" alt />
            <p>账户信息</p>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_xxtz.png" alt />
            <p>消息通知</p>
          </van-grid-item>
          <van-grid-item>
            <img src="@/assets/img/user_icon_xgmm.png" alt />
            <p>修改密码</p>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_yjfk.png" alt />
            <p>意见反馈</p>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_dzcf.png" alt />
            <p>我的处方</p>
          </van-grid-item>
          <van-grid-item to="/notfound">
            <img src="@/assets/img/user_icon_yyr.png" alt />
            <p>用药人</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 底部 tabbar-->
    <div class="footer">
      <van-tabbar class="tabbar" v-model="active" active-color="#07c160" inactive-color="#000">
        <van-tabbar-item to="/">
          <img src="@/assets/img/bottom_home.png" alt />
          <p>首页</p>
        </van-tabbar-item>
        <van-tabbar-item to="/cate">
          <img src="@/assets/img/bottom_seek.png" alt />
          <p>分类</p>
        </van-tabbar-item>
        <van-tabbar-item to="/cart" :info="carts.lists.length">
          <img src="@/assets/img/bottom_cart2.png" alt />
          <p>购物车</p>
        </van-tabbar-item>
        <van-tabbar-item to="/personal">
          <img src="@/assets/img/bottom_user_selected.png" alt />
          <p>我的</p>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      active: 3,
      userName: ""
    };
  },
  mounted() {
    this.getName();
  },
  methods: {
    getName() {
      let name = localStorage.getItem("user");
      this.userName = name;
    },
    plus(){
      this.$toast({
        duration:800,
        message:'节操 +1',
      });
    }
  },
  computed: {
    ...mapState(["carts"])
  }
};
</script>

<style lang="less" scoped>
.personal {
  .title {
    background: linear-gradient(
        139deg,
        #ffe14c 35%,
        #ffd757 50%,
        #ffd35b 57%,
        #ffc657 100%
      ),
      linear-gradient(90deg, #6bf3eb 0, #65f1b1 42%, #5fee77 100%),
      linear-gradient(#000, #000);
    height: 208px;
    padding: 0 13px;
    position: relative;
    &-head {
      color: #333;
      padding-top: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .van-icon {
        font-weight: bold;
        font-size: 20px;
        line-height: 20px;
      }
      span {
        padding: 0 20px 0 6px;
        line-height: 20px;
      }
    }
    &-user {
      display: flex;
      align-items: center;
      padding-top: 20px;
      margin-bottom: 8px;
      .icon-user {
        width: 58px;
        height: 58px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      &-msg {
        color: #333;
        &_phone {
          font: 500 20px/32px "微软雅黑";
          max-width: 144px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &_notice {
          font: 12px "微软雅黑";
        }
      }
      &_sign {
        padding: 2px 8px 2px 30px;
        background: #fff;
        border-radius: 14px;
        position: relative;
        right: -56px;
        bottom: -12px;
        .icon-sign {
          position: absolute;
          left: 8px;
          top: 2px;
          display: block;
          width: 18px;
          height: 18px;
          background: url("../../assets/img/check-in.png");
          background-size: cover;
        }
        span {
          font: 14px/20px "微软雅黑";
          background-image: -webkit-linear-gradient(bottom, red, #fd8403, #ff0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    &-bot {
      height: 88px;
      background-image: linear-gradient(
        0deg,
        #fffae1 0,
        #fff 26%,
        #fafafa 100%
      );
      border-radius: 8px 8px 0 0;
      .van-grid {
        padding-top: 8px;
        span {
          color: #666;
          font: 12px/16px "微软雅黑";
        }
        h4 {
          color: #333;
          font: 20px/26px "微软雅黑";
        }
      }
    }
  }

  .main {
    background: #fafafa;
    padding-bottom: 62px;
    .order {
      background: #fff;
      padding: 23px 13px;
      height: 124px;
      margin-bottom: 15px;
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          position: relative;
          z-index: 0;
          padding: 0 6px;
        }
        h2::before {
          position: absolute;
          z-index: -1;
          bottom: -1px;
          left: 0;
          content: "";
          width: 100%;
          height: 4px;
          box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
            rgba(131, 241, 219, 0.59);
          background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
            linear-gradient(#94ffc4, #94ffc4);
        }
        p {
          font-size: 14px;
        }
      }
      &-main {
        padding-top: 10px;
        .van-grid {
          .van-grid-item {
            img {
              width: 44px;
              height: 44px;
            }
            p {
              color: #333;
              font: 13px/34px "微软雅黑";
            }
          }
        }
      }
    }
    .grid {
      background: #fff;
      .van-grid {
        padding: 0 13px;
        .van-grid-item {
          img {
            width: 54px;
            height: 54px;
          }
          p {
            color: #666;
            font: 13px/24px "微软雅黑";
          }
        }
      }
    }
  }
  .footer {
    .tabbar {
      background-color: #fff;
      padding: 6px 0;
      text-align: center;
      img {
        width: 30px;
        height: 30px;
      }
      p {
        margin: 0;
      }
      .van-tabbar-item {
        /deep/.van-tabbar-item__icon {
          position: relative;
          right: -14px !important;
          bottom: -8px !important;
        }
      }
    }
    .van-tabbar--fixed {
      -webkit-transform: translateZ(0);
    }
  }
}
</style>